<template>
  <div class="body">
    <narbarWord @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2" :message="headName"></narbarWord>
    <div :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px',marginBottom:50+'px'}">
      <scroll-view>
        <div class="swiper-wrap">
        <swiper class="swiper-inner"
                :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :vertical="vertical"
                :interval="interval" :duration="duration" :current="current" @change="slideChange">
          <swiper-item v-if="videoUrl" class="image">
            <video id="myVideo" class="image"
                   :src='videoUrlList[0]' @tap="videoPlay"
                   :autoplay="autoplayVideo" controls="controls"></video>
          </swiper-item>
          <block v-for="(item,index) in movies" :key="index" >
            <swiper-item>
              <image  mode="aspectFit"
                      :src="item"
                      alt=""
                      class="banner-img"
                      ></image>
            </swiper-item>
          </block>
        </swiper>
        </div>
        <div class="content">
          <div class="word1">
            {{paintingName}}
          </div>
          <div class="desc">
            <div class="desc1">抢购倒计时</div>
            <div class="desc2">
              <div class="desc">
                <div class="figure-text1" v-if="countDown !== '已结束' && countDown !=='未开始'">
                  <p style="color: white;margin-left: 3px">{{anumber}}</p>
                </div>
                <div class="figure-text3" v-if="countDown !== '已结束' && countDown !=='未开始'">
                  <p style="color: white;margin-left: 3px">{{anumber1}}</p>
                </div>
                <text class="mid-text2" v-if="countDown !== '已结束' && countDown !=='未开始'">:</text>
                <div class="figure-text2" v-if="countDown !== '已结束' && countDown !=='未开始'">
                  <p style="color: white;margin-left: 3px">{{anumber2}}</p>
                </div>
                <div class="figure-text3" v-if="countDown !== '已结束' && countDown !=='未开始'">
                  <p style="color: white;margin-left: 3px">{{anumber3}}</p>
                </div>
              </div>
<!--              <text class="djs" v-if="countDown !== '已结束' || countDown !=='未开始'">{{countDown}}</text>-->
              <div class="countdown-text1">
                <text class="djs1" v-if="countDown === '已结束' || countDown ==='未开始'">{{countDown}}
                </text>
              </div>
            </div>
          </div>
        </div>
        <div class="grey">
          <div class="row">
            <p class="id">作品编号</p>
            <p class="how">{{paintingCode}}</p>
          </div>
          <div class="row">
            <p class="id">作品尺寸</p>
            <p class="how">{{paintingType}}{{paintingLength}}*{{paintingWidth}}cm</p>
          </div>
          <div class="row">
            <p class="id">作品售价</p>
            <div class="ifrow">
              <p class="how" v-if="discountedPrice!==paintingPrice">￥{{lastPrice}}</p>
            <p class="how" style=" text-decoration: line-through" v-if="discountedPrice!==paintingPrice">￥{{paintingPrice}}</p>
              <p class="how"  v-if="discountedPrice===paintingPrice">￥{{paintingPrice}}</p>
            </div>
          </div>
          <div class="row" >
            <p class="id">作品标签</p>
            <div class="how1">
              <div v-for="(item,index) of paintingStyleDTOS" :key="index">
                <div class="kuang">
                  <p>{{item.pgsName}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rowword">
          <p class="desc1" style="font-size: 12px">服务保障</p>
          <p style="color: #902A26;font-size: 12px;margin-top: 2px">如实描述！终身保真！</p>
        </div>
        <div class="paingtercar">
          <div class="leftpainter">
            <image :src="painterdata[0].painterImage" class="paingterimg"></image>
            <div class="afterpainter">
              <p style="color: #902A26;font-size: 12px;margin-left: 16px">在售{{painterdata[0].onSaleCount}}件作品</p>
            </div>
          </div>
          <div class="rightpainter">
            <div class="painternameline">
              <p style="width: 130px">{{painterdata[0].painterName}}</p>
              <p style="font-size: 12px;color: #999999" @click="learnpainter">了解作者详情>></p>
            </div>
            <div class="painterbiaoqian">
              <div v-for="(item,index) of painterdata[0].painterStyleDTOS" :key="index">
                <div class="kuang">
                  <p>{{item.psName}}</p>
                </div>
              </div>
            </div>
            <div class="info">
              {{painterdata[0].painterStory}}
            </div>
          </div>
        </div>
        <div class="title">
          <div class="detail" @click="changePage1">
            <p class="word">作品详情</p>
            <div class="isIn" v-if="page1"></div>
          </div>
          <div class="detail" @click="changePage2">
            <p class="word">作者故事</p>
            <div class="isIn" v-if="page2"></div>
          </div>
          <div class="detail" @click="changePage3">
            <p class="word">问题咨询</p>
            <div class="isIn" v-if="page3"></div>
          </div>
          <div class="detail" @click="changePage4">
            <p class="word">装裱常识</p>
            <div class="isIn" v-if="page4"></div>
          </div>
        </div>
        <div class="title1" v-if="page1">
          {{paintingInfo}}
        </div>
        <div class="title1" v-if="page2">
          {{painterdata[0].painterStory}}
        </div>
        <div class="title1"  v-if="page3">
          1111112222222222222
        </div>
        <div class="title1" v-if="page4">
          1114444444444444
        </div>
      </scroll-view>
    </div>
    <div class="under">
      <div class="lable" @click="pushshopingcar">
        <p class="payall">加入购物车</p>
      </div>
      <div class="pay" @click="paynow()">
        <p class="payall1">立即购买</p>
      </div>
    </div>
  </div>
</template>

<script>
  import narbarWord from "../../components/narbarWord";

  export default {
    components: {
      narbarWord,
    },
    created() {
      setInterval(this.timer, 1000);
    },
    data() {
      return {
        msgFormSon: '',
        msgFormSon1: '',
        headName: '商品详情',
        indicatorDots: true,
        vertical: false,
        autoplay: false,
        circular: true,
        interval: 2000,
        duration: 500,
        autoplayVideo: true,
        current: 0,
        playIndex: 0,
        videoId: "myVideo",
        movies: [],
        videoUrlList: [],
        paintingName: '',
        painterId: '',
        countDown: '',
        gmtOpen: '',
        gmtEnd: '',
        paintingCode: '',
        paintingLength: '',
        paintingWidth: '',
        paintingType: '',
        paintingPrice: '',
        discountedPrice:'',
        lastPrice:'',
        data: [],
        paintingId: '',
        painterdata:[],
        videoUrl:true,
        paintingStyleDTOS:[],
        isSole:0,
        cutdown:[],
        cutdown1:[],
        anumber:'',
        anumber1:'',
        anumber2:'',
        anumber3:'',
        page1:true,
        page2:false,
        page3:false,
        page4:false,
        paintingInfo:''
      }
    },
    onLoad(options) {
      this.paintingId = options.paintingId;
      this.query();
      wx.showShareMenu({
        withShareTicket: true
      })
    },
    onPullDownRefresh () {
      this.query();
    },
    methods: {
      getMsgFormSon(data) {
        this.msgFormSon = data;
      },
      getMsgFormSon1(data) {
        this.msgFormSon1 = data;
      },
      slideChange(e) {
        if (e.target.current !== 0) {
          wx.createVideoContext(this.videoId).pause();
        } else wx.createVideoContext(this.videoId).play();
      },
      timer: function () {
        let open_str = (this.gmtOpen).replace(/-/g, "/");
        let openTime = new Date(open_str);
        let nowTime = new Date();
        let end_str = (this.gmtEnd).replace(/-/g, "/");
        let endTime = new Date(end_str);
        let t = endTime.getTime() - nowTime.getTime();
        let t1 = nowTime.getTime() - openTime.getTime();
        if (t1 < 0) {
          this.countDown = '未开始'
        } else if (t > 0 && t1 > 0) {
          //let day = Math.floor(t / 86400000);
          let hour = Math.floor((t / 3600000));
          let min = Math.floor((t / 60000) % 60);
          //let sec = Math.floor((t / 1000) % 60);
          hour = hour < 10 ? "0" + hour : hour;
          min = min < 10 ? "0" + min : min;
          //sec = sec < 10 ? "0" + sec : sec;
          let format = '';
          if (hour >= 100) {
            format = ` 99ㅤ59 `;
          } else if (hour > 0 && hour < 100) {
            format = ` ${hour} ${min} `;
          } else if (hour <= 0) {
            format = ` 00ㅤ${min} `;
          }
          this.countDown = format;
         this.cutdown=Array(hour);
          this.anumber=parseInt(this.cutdown.length/10);
          this.anumber1=parseInt(this.cutdown.length%10);
          this.cutdown1=Array(min);
          this.anumber2=parseInt(this.cutdown1.length/10);
          this.anumber3=parseInt(this.cutdown1.length%10);
        } else {
          this.countDown = '已结束';
        }
      },
      query() {
        this.$request.post({
          url: '/api/painting/queryPainting',
          data: {
            "paintingId": this.paintingId
          }
        }).then(res => {
          this.data.push(res);
          this.movies = res.imageUrlList;
          this.videoUrlList = res.videoUrlList;
          if(this.videoUrlList.length===0)
          {
            this.videoUrl=false
          }
          else{
            this.videoUrl=true;
          }
          this.paintingStyleDTOS=res.paintingStyleDTOS;
          this.paintingName = res.paintingName;
          this.painterId = res.painterId;
          this.gmtOpen = res.gmtOpen;
          this.gmtEnd = res.gmtEnd;
          this.paintingCode = res.paintingCode;
          this.paintingLength = res.paintingLength;
          this.paintingWidth = res.paintingWidth;
          this.paintingType = res.paintingType;
          this.paintingPrice = res.paintingPrice;
          this.discountedPrice=res.discountedPrice;
          this.lastPrice=(this.paintingPrice-this.discountedPrice).toFixed(2);
          this.isSole=res.isSole;
          this.paintingInfo=res.paintingInfo;
          this.$request.post({
            url: '/api/painter/query4Mobile',
            data: {
              'painterId': this.painterId
            }
          }).then(res => {
            this.painterdata=res;
          })
        })
      },
      pushshopingcar() {
        if(this.countDown==='已结束'||this.countDown==='未开始'||this.isSole===1)
        {
          wx.showToast({
            title: '当前不能加购此宝贝',
            icon: 'none',
            duration: 2000
          })
        }
        else{
          this.$request.post({
            url: '/api/shoppingCar/add',
            data: {
              'paintingId': this.paintingId
            }
          }).then(res => {
            if(res.longResult>0){
              wx.reLaunch({
                url: '/pages/logs/main',
              });
            }
            else{
              wx.showToast({
                title: '加入购物车失败',
                icon: 'none',
                duration: 2000
              })
            }
          })
        }
      },
      getpainterinfo(){
        this.$request.post({
          url: '/api/painter/query4Mobile',
          data: {
            'painterId': this.painterId
          }
        }).then(res => {
          this.painterdata=res;
        })
      },
      learnpainter(){
        const url = '/pages/painterInfo/main?painterId='+this.painterId;
        const pages = getCurrentPages();
        if(pages.length === 10){
          wx.redirectTo({url});
        }
        else{
          wx.navigateTo({url});
        }
      },
      paynow(){
        if(this.countDown==='已结束'||this.countDown==='未开始'||this.isSole===1)
        {
          wx.showToast({
            title: '当前不能购买此宝贝',
            icon: 'none',
            duration: 2000
          })
        }
        else{
          const url = '/pages/orderConfirmed/main?paintingIds='+this.paintingId;
          const pages = getCurrentPages();
          if(pages.length === 10){
            wx.redirectTo({url});
          }
          else{
            wx.navigateTo({url});
          }
        }
      },
      changePage1()
      {
        this.page1=true;
        this.page2=false;
        this.page3=false;
        this.page4=false;
      },
      changePage2()
      {
        this.page1=false;
        this.page2=true;
        this.page3=false;
        this.page4=false;
      },
      changePage3()
      {
        this.page1=false;
        this.page2=false;
        this.page3=true;
        this.page4=false;
      },
      changePage4()
      {
        this.page1=false;
        this.page2=false;
        this.page3=false;
        this.page4=true;
      },
    },
  }
</script>

<style scoped>
  .body {
    background: rgba(244, 244, 244, 1);
    width: 100%;
    height: 100%;
  }

  /*.swiper {*/
  /*  height: 320px;*/
  /*  width: 100%;*/
  /*}*/

  .image {
    width: 375px;
    height: 160px;
    background-color: rgba(236, 238, 240, 1);
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .swiper-wrap {
    width: 100%;
    height: 320px;
    background-color: #ecf8ff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-inner {
    width: 375px;
    height: 320px;
    margin: 0 auto;

  }

  .content {
    width: 375px;
    height: 100px;
    margin-top: 16px;
    margin-left: 12px;
  }

  .word1 {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 25px;
  }

  .under {
    width: 375px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
  }

  .pay {
    position: fixed;
    right: 0;
    width: 60%;
    height: 50px;
    background: rgba(144, 42, 38, 1);
  }

  .payall {
    margin-top: 15px;
    margin-left: 34px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 20px;
  }

  .lable {
    position: fixed;
    left: 0;
    width: 40%;
    height: 50px;
    background-color: black;
  }

  .payall1 {
    margin-top: 15px;
    margin-left: 80px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 20px;
  }

  .desc {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    height: 30px;
  }

  .desc1 {
    width: 100px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
  }

  .figure-text1 {
    margin-top: -10px;
    margin-left: 63px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }

  .figure-text3 {
    margin-top: -10px;
    margin-left: 3px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }

  .figure-text2 {
    margin-top: -10px;
    margin-left: 15px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }

  .djs {
    margin-left: -90px;
    font-size: 17px;
    color: white;
    letter-spacing: 8px;
  }

  .djs1 {
    font-size: 15px;
    font-weight: 400;
    color: rgb(255, 5, 17);
  }

  .countdown-text1 {
    margin-left: 66px;
  }

  .mid-text2 {
    margin-left: 8px;
    height: 30px;
    margin-top: -10px;
  }

  .desc2 {
    margin-left: -80px;
    display: flex;
    flex-direction: row;
  }

  .grey {
    height: 139px;
    background: rgba(238, 238, 238, 1);
    margin-left: 12px;
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    padding-left: 12px;
  }

  .row {
    display: flex;
    flex-direction: row;
    margin-top: 12px;
  }

  .id {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
  }

  .how {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
    margin-left: 16px;
  }

  .how1 {
    margin-left: 16px;
    display: flex;
    flex-direction: row;
  }

  .kuang {
    height: 18px;
    border: 1px solid rgba(144, 42, 38, 1);
    color: #902A26;
    margin-right: 5px;
    font-size: 12px;
  }

  .rowword {
    display: flex;
    flex-direction: row;
    margin-left: 12px;
    margin-top: 12px;
  }

  .paingtercar {
    width: 351px;
    height: 145px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(191, 190, 190, 0.5);
    border-radius: 4px;
    margin-left: 12px;
    margin-top: 12px;
    margin-right: 12px;
    position: relative;
  }

  .leftpainter {
    position: absolute;
    left: 8px;
    top: 8px;
  }

  .paingterimg {
    width: 100px;
    height: 100px;
  }

  .afterpainter {
    width: 100px;
    height: 25px;
    background: rgba(237, 237, 237, 1);
  }

  .rightpainter {
    position: absolute;
    left: 125px;
    top: 8px;
  }

  .painternameline {
    display: flex;
    flex-direction: row;
  }
  .painterbiaoqian {
    display: flex;
    flex-direction: row;
    margin-top: 7px;
  }
  .info{
    margin-top: 12px;
    font-size: 12px;
    color: #666666;
    word-break: break-all;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  .rightullidiv {
    width: 375px;
    height: 375px;
    background-color: rgba(236, 238, 240, 1);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner-img{
    height: 100%;
    width: 100%;
  }
  .title{
    padding-top: 10px;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 12px;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    background: rgba(255, 255, 255, 1);
  }
  .detail{
    display: flex;
    flex-direction: column;
  }
  .isIn{
    width: 60px;
    height: 2px;
    background: rgba(144, 42, 38, 1);
  }
  .word{
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:20px;
  }
  .title1{
    margin-left: 12px;
    margin-right: 12px;
    background: rgba(255, 255, 255, 1);
    word-break: break-all;
    font-size:13px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:18px;
    text-indent:25px;
    padding: 10px 5px 80px 8px;
  }
  .ifrow{
    display: flex;
    flex-direction: row;
  }
</style>
